<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>自助购保</title>
		<style type="text/css">
			body{
			}
			.aaaa {
				margin: 0em;
				padding: 0em;
				width: 100%;
				position: absolute;
			}
			.herd{
				 text-align: center;
			}
			.herd1{
				border-bottom: 1px solid #87CEFA;
				width: 95%;
				
			}
			.ins{
				border-bottom: 1px solid #FFFFFF;
				width: 98%;
				height: 4em;
			
			}
			a{
				text-decoration:none;
			}
			
			
			.ins1{
				border: 1px solid #FFFFFF;
				width: 46%;
				height: 3em;
				text-align: center;
				margin-top: em;
				line-height: 3em;
				border-radius:4em ;
				margin-top: 1em;
				
			}
			.bei{
				background: url(../statics/img/whd_img/343.png);
				width: 98%;
				height: 30em;
				margin-top: 1em;
			}
			.ins2{
				border: 1px solid #FFFFFF;
				width: 46%;
				text-align: center;
				height: 3em;
					line-height: 3em;
					position: absolute;
					top: 5.7em;
					left: 10.7em;
					border-radius:4em ;
					background-color: #87CEFA;
					
			}
			.caretu{
				position: relative;
				top: 1em;
				left: 1em;
				border: 1px solid #FFFFFF;
				width: 19em;
				height: 16em;
				border-radius:1em ;
				background-color: #FFFFFF;
				
				
			}
			.caretu1{
				position: relative;
				top: -29em;
				left: 1em;
				border: 1px solid #FFFFFF;
				width: 19em;
				height: 16em;
				border-radius:1em;
				background-color: #FFFFFF;
				
				
			}
			.caretu p:nth-of-type(1){
				margin-left: 1em;
				font-size: 0.8em;
			}
			.caretu p:nth-of-type(2){
				margin-left: 1em;
				margin-top: -0.3em;
				font-size: 0.8em;
			}
			.caretu1 p:nth-of-type(1){
				margin-left: 1em;
				font-size: 0.8em;
			}
			.caretu1 p:nth-of-type(2){
				margin-left: 1em;
				margin-top: -0.3em;
				font-size: 0.8em;
			}
			.pr{
				margin-top: -3em;
				margin-left: 12em;
				font-size: 1.1em;
			}
			.pr1{
				margin-top: -3em;
				margin-left: 12em;
				font-size: 1.1em;
			}
		  .qi{
		  	color: red;
		  	font-size: 1.4em;
		  }
		  
		  .beiji{
		  	border: 1px solid black;
		  	height: 3em;
		  	margin-top: -8em;
		  	z-index:2;
		  	background-color:rgba(192,192,192,0.1);
		  }
		 .beiji1{
		  	border: 1px solid #FFFFFF;
		  	height: 3em;
		  	margin-top: -8em;
		  	z-index:2;
		  	background-color:rgba(192,192,192,0.1);
		  }
		 
		</style>
	</head>

	<body>
		<div class="container-fluid aaaa">
			<div class="col-xs-12 herd">
					<img src="../statics/img/whd_img/logo.png" />
				<div class="col-xs-12 herd1" ></div>
			</div>
			<div class="col-xs-12 ins">
			<div class="col-xs-6 car1">
			<div class="col-xs-6 ins1">汽车保险</div>
				<div id="iv"> </div>
					</div>
				<div class="col-xs-6 car2">
				<div class=" col-xs-6 ins2">三责保险</div>
				<a href="whd_insecar">
				<div class="caretu1">
						<img src="../statics/img/whd_img/微信图片_20181028091451.jpg" width="304em" height="184em" style="border-radius:1em;"/>
						<p>出险零等待，全国皆可赔：</p>			
						<p>服务好，保障多，赶紧来看看吧！</p>
						<div class="pr1">
							<p><span class="qi">￥655</span>起</p>
						</div>
						<div class="beiji1">
							<p style="font-size: 1.5em; color: #FFFFFF;"> 三责保险</p>
						</div>
					</div></a>
				
				
				</div>
			</div>
		</div>
	</body>
<script type="text/javascript" src="../statics/js/jquery-1.12.4.js" ></script>
<script type="text/javascript">
	$(function(){
		
		
		jj();
		$(".ins1").click(function(){
				$(".ins1").css("color","#ffffff");
			$(".ins1").css("background-color","#87CEFA");
				$(".ins2").css("color","black");
			$(".ins2").css("background-color","#ffffff");
				$(".caretu").show();
			$(".caretu1").hide();
		});
		$(".ins2").click(function(){
				$(".ins2").css("color","#ffffff");
			$(".ins2").css("background-color","#87CEFA");
				$(".ins1").css("color","black");
			$(".ins1").css("background-color","#ffffff");
				$(".caretu1").show();
			$(".caretu").hide();
		});
	
		
	
	
	
	});
	
	function jj(){
		$.ajax({
			 url: "Insurance",
			 type: "post",
			 data: "",
			 success: function(data){
			  		$(data).each(function(index,ob){
			  	
			  			var id=ob.insuranceid;
			  			var insurancetype=ob.insurancetype;
			  			var charge=ob.charge;
			  			div=
						
									"<div class=' col-xs-12 bei'>"+"<a href='/whd_inse'>"+
							"<div class='caretu'>"+
								"<img src='../statics/img/whd_img/d99b54c32aab76c0.octet.jpg' width='304em' height='184em' style='border-radius:1em;'/>"+
								"<p>出险零等待，全国皆可赔：</p>"+			
								"<p>服务好，保障多，赶紧来看看吧！</p>"
								+"<div class='pr'>"
								+"<p><span class='qi'>"+"￥"+charge+"</span>起</p>"+
								"</div>"+
								"<div class='beiji'>"+
									"<p style='font-size: 1.5em; color: #FFFFFF;'>"+insurancetype+"</p>"
								+"</div>"
							+"</div></a>"+
							"</div>"
					 ;
						 $("#iv").before(div); 
		                
			  		});
			  	},
			 dataType: "json"
			});
		
		
	}
	
	
	
	</script>
</html>